<template>
  <div v-if="themeStore.currentLayout === 'siderMode'">
    <Simplebar class="scrollbarWrap" data-simplebar-auto-hide="false">
      <a-menu
        v-model:selectedKeys="selectedKeys"
        v-model:openKeys="openKeys"
        :theme="themeStore.isBusiness ? 'dark' : 'light'"
        mode="inline"
      >
        <template v-for="(item, index) in hasChildren()" :key="index">
          <template v-if="item.children && item.children.length === 1">
            <a-menu-item
              :key="item.children[0].path"
              @click="changeRouter(item.children[0])"
              v-if="!item.children[0].meta.hidden"
            >
              <template #icon>
                <component class="icons" :is="item.children[0].meta.icon" />
              </template>
              <span class="nav-text">{{ item.children[0].meta.title }}</span>
            </a-menu-item>
          </template>

          <template v-else>
            <a-sub-menu :key="item.path">
              <template #title>
                <component class="icons" :is="item.meta.icon" />
                <span>{{ item.meta.title }}</span>
              </template>
              <template v-for="(subItem, index) in item.children" :key="index">
                <a-menu-item
                  :key="subItem.meta.title"
                  v-if="!subItem.meta.hidden"
                  @click="changeRouter(subItem)"
                >
                  <component
                    class="icons"
                    :is="item.children[index].meta.icon"
                  />
                  <span>{{ subItem.meta.title }}</span>
                </a-menu-item>
              </template>
            </a-sub-menu>
          </template>
        </template>
      </a-menu>
    </Simplebar>
  </div>
  <div v-else-if="themeStore.currentLayout === 'topMode'">
    <a-menu
      v-model:selectedKeys="selectedKeys"
      v-model:openKeys="openKeys"
      :theme="themeStore.isBusiness ? 'dark' : 'light'"
      mode="horizontal"
      class="top-mode-menu"
    >
      <template v-for="(item, index) in hasChildren()" :key="index">
        <template v-if="item.children && item.children.length === 1">
          <a-menu-item
            :key="item.children[0].path"
            @click="changeRouter(item.children[0])"
            v-if="!item.children[0].meta.hidden"
          >
            <component class="top-icons" :is="item.children[0].meta.icon" />
            <span class="nav-text">{{ item.children[0].meta.title }}</span>
          </a-menu-item>
        </template>

        <template v-else>
          <a-sub-menu :key="item.path">
            <template #title>
              <div style="display: flex;align-items: center;height: 100%">
                <component class="top-icons" :is="item.meta.icon" />
                <span>{{ item.meta.title }}</span>
              </div>
            </template>
            <template v-for="(subItem, index) in item.children" :key="index">
              <a-menu-item
                :key="subItem.meta.title"
                v-if="!subItem.meta.hidden"
                @click="changeRouter(subItem)"
                style="display: flex; align-items: center"
              >
                <component
                  class="top-icons"
                  :is="item.children[index].meta.icon"
                />
                <span>{{ subItem.meta.title }}</span>
              </a-menu-item>
            </template>
          </a-sub-menu>
        </template>
      </template>
    </a-menu>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useThemeStore } from "@/stores/models/theme";
import useUserStore from "@/stores/models/user";
import router from "@/router";
import Simplebar from "simplebar-vue";
import "simplebar-vue/dist/simplebar.min.css";
import { useBreadcrumbStore } from "@/stores/models/breadcrumb";

const userStore = useUserStore();
const themeStore = useThemeStore();
const breadcrumbStore = useBreadcrumbStore();
//默认激活的菜单
const selectedKeys = ref(["/home"]);
const openKeys = ref([""]);

//过滤出菜单路由，有子菜单的路由
const hasChildren = () => {
  return userStore.menuRoutes.filter((item) => item.children);
};

//路由跳转
const changeRouter = (item) => {
  //点击菜单时路由跳转
  router.push(item.path);

  //点击菜单时获取头部面包屑路由展示数据
  breadcrumbStore.setBreadcrumb(item);
};
</script>
<style scoped lang='scss'>
.scrollbarWrap {
  height: calc(100vh - $base-sider-height);
}

.top-mode-menu {
  width: calc(100vw - $base-topMode-right-width - $base-topMode-left-width);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

// 滚动条背景颜色
:deep(.simplebar-scrollbar::before) {
  display: none;
}

.icons {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}

.top-icons {
  width: 16px;
  height: 64px;
  margin-right: 5px;
}
</style>